<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Login = {
				template: '<p>登陆组件</p>'
			}
			let Register = {
				template: '<p>注册组件</p>'
			}
			let router = new VueRouter({
				routes: [{
					path: '/login',
					name: 'login',
					component: Login
				},{
					path: '/register',
					name: 'register',
					component: Register
				}]
			})
			
			let App = {
				template:`
				<div>
					<router-link :to="{name: 'login'}">点击登陆</router-link>
					<router-link :to="{name: 'register'}">点击注册</router-link>
					<router-view></router-view>
				</div>
				`
			}
			let vm = new Vue({
				el: '#app',
				components: { App },
				router,
				data(){
					return {
						name: 'zqf'
					}
				},
				mounted(){
					
				},
			})
		</script>
	</body>
</html>
